<!DOCTYPE html><html><head>
      <title>1.flutter入门知识</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link rel="stylesheet" href="file:////Users/jiuyue/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.8.15/crossnote/dependencies/katex/katex.min.css">
      
      
      
      
      
      <style>
      code[class*=language-],pre[class*=language-]{color:#333;background:0 0;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.4;-moz-tab-size:8;-o-tab-size:8;tab-size:8;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:.8em;overflow:auto;border-radius:3px;background:#f5f5f5}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal;background:#f5f5f5}.token.blockquote,.token.comment{color:#969896}.token.cdata{color:#183691}.token.doctype,.token.macro.property,.token.punctuation,.token.variable{color:#333}.token.builtin,.token.important,.token.keyword,.token.operator,.token.rule{color:#a71d5d}.token.attr-value,.token.regex,.token.string,.token.url{color:#183691}.token.atrule,.token.boolean,.token.code,.token.command,.token.constant,.token.entity,.token.number,.token.property,.token.symbol{color:#0086b3}.token.prolog,.token.selector,.token.tag{color:#63a35c}.token.attr-name,.token.class,.token.class-name,.token.function,.token.id,.token.namespace,.token.pseudo-class,.token.pseudo-element,.token.url-reference .token.variable{color:#795da3}.token.entity{cursor:help}.token.title,.token.title .token.punctuation{font-weight:700;color:#1d3e81}.token.list{color:#ed6a43}.token.inserted{background-color:#eaffea;color:#55a532}.token.deleted{background-color:#ffecec;color:#bd2c00}.token.bold{font-weight:700}.token.italic{font-style:italic}.language-json .token.property{color:#183691}.language-markup .token.tag .token.punctuation{color:#333}.language-css .token.function,code.language-css{color:#0086b3}.language-yaml .token.atrule{color:#63a35c}code.language-yaml{color:#183691}.language-ruby .token.function{color:#333}.language-markdown .token.url{color:#795da3}.language-makefile .token.symbol{color:#795da3}.language-makefile .token.variable{color:#183691}.language-makefile .token.builtin{color:#0086b3}.language-bash .token.keyword{color:#0086b3}pre[data-line]{position:relative;padding:1em 0 1em 3em}pre[data-line] .line-highlight-wrapper{position:absolute;top:0;left:0;background-color:transparent;display:block;width:100%}pre[data-line] .line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:hsla(24,20%,50%,.08);background:linear-gradient(to right,hsla(24,20%,50%,.1) 70%,hsla(24,20%,50%,0));pointer-events:none;line-height:inherit;white-space:pre}pre[data-line] .line-highlight:before,pre[data-line] .line-highlight[data-end]:after{content:attr(data-start);position:absolute;top:.4em;left:.6em;min-width:1em;padding:0 .5em;background-color:hsla(24,20%,50%,.4);color:#f4f1ef;font:bold 65%/1.5 sans-serif;text-align:center;vertical-align:.3em;border-radius:999px;text-shadow:none;box-shadow:0 1px #fff}pre[data-line] .line-highlight[data-end]:after{content:attr(data-end);top:auto;bottom:.4em}html body{font-family:'Helvetica Neue',Helvetica,'Segoe UI',Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ol,html body>ul{margin-bottom:16px}html body ol,html body ul{padding-left:2em}html body ol.no-list,html body ul.no-list{padding:0;list-style-type:none}html body ol ol,html body ol ul,html body ul ol,html body ul ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;background-color:#f0f0f0;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:700;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:700}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::after,html body code::before{letter-spacing:-.2em;content:'\00a0'}html body pre>code{padding:0;margin:0;word-break:normal;white-space:pre;background:0 0;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:after,html body pre code:before,html body pre tt:after,html body pre tt:before{content:normal}html body blockquote,html body dl,html body ol,html body p,html body pre,html body ul{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body code,html body pre{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview ul{list-style:disc}.markdown-preview ul ul{list-style:circle}.markdown-preview ul ul ul{list-style:square}.markdown-preview ol{list-style:decimal}.markdown-preview ol ol,.markdown-preview ul ol{list-style-type:lower-roman}.markdown-preview ol ol ol,.markdown-preview ol ul ol,.markdown-preview ul ol ol,.markdown-preview ul ul ol{list-style-type:lower-alpha}.markdown-preview .newpage,.markdown-preview .pagebreak{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center!important}.markdown-preview:not([data-for=preview]) .code-chunk .code-chunk-btn-group{display:none}.markdown-preview:not([data-for=preview]) .code-chunk .status{display:none}.markdown-preview:not([data-for=preview]) .code-chunk .output-div{margin-bottom:16px}.markdown-preview .md-toc{padding:0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link div,.markdown-preview .md-toc .md-toc-link-wrapper .md-toc-link p{display:inline}.markdown-preview .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,.66);border:4px solid rgba(150,150,150,.66);background-clip:content-box}html body[for=html-export]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0;min-height:100vh}@media screen and (min-width:914px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px + 2em)}}@media screen and (max-width:914px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for=html-export]:not([data-presentation-mode]) .markdown-preview{font-size:14px!important;padding:1em}}@media print{html body[for=html-export]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for=html-export]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,.66);border:4px solid rgba(150,150,150,.66);background-clip:content-box}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc{padding:0 16px}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link{display:inline;padding:.25rem 0}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link div,html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper .md-toc-link p{display:inline}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc .md-toc .md-toc-link-wrapper.highlighted .md-toc-link{font-weight:800}html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% - 300px);padding:2em calc(50% - 457px - 300px / 2);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for=html-export]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for=html-export]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for=html-export]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
/* Please visit the URL below for more information: */
/*   https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */

      </style>
      <!-- The content below will be included at the end of the <head> element. --><script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    // your code here
  });
</script></head><body for="html-export">
    
    
      <div class="crossnote markdown-preview  ">
      
<h2 id="一-环境安装">一. 环境安装 </h2>
<p><a href="https://docs.flutter.cn/get-started/install/windows/mobile">https://docs.flutter.cn/get-started/install/windows/mobile</a></p>
<h2 id="二-创建flutter项目">二. 创建Flutter项目 </h2>
<blockquote>
<p>创建Flutter项目有两种方式：<code>通过命令行创建</code>&nbsp;和&nbsp;<code>通过开发工具创建</code></p>
</blockquote>
<h3 id="11-通过命令行创建">1.1. 通过命令行创建 </h3>
<p>通过命令行创建非常简单，在终端输入以下命令即可：</p>
<ul>
<li><strong>注意</strong> Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识</li>
<li>创建完之后使用自己喜欢的开发工具打开即可</li>
</ul>
<pre data-role="codeBlock" data-info="" class="language-text"><code>flutter create fluter_demo
</code></pre><h3 id="12-通过开发工具创建">1.2. 通过开发工具创建 </h3>
<p>这里也可以直接通过<strong>Android Studio</strong> <strong>VSCode</strong> 来进行创建：</p>
<h3 id="13-默认程序分析">1.3. 默认程序分析 </h3>
<p>我们讲创建的应用起来跑在模拟器上（我这里选择iPhone模拟器，Android也可以），会看到如下效果：<br>
<img src="image.png" alt="alt text"></p>
<p><strong>默认项目分析：</strong></p>
<ul>
<li>我们之前已经分析过目录结构了，在目录下有一个<code>lib</code>文件夹，里面会存放我们编写的Flutter代码；</li>
<li>打开发现里面有一个<code>main.dart</code>，它是我们Flutter启动的<code>入口文件</code>，里面有<code>main函数</code>；</li>
</ul>
<p><strong>默认代码分析：</strong></p>
<ul>
<li>这是一个计数器的案例程序，点击右下角的&nbsp;<code>+</code>&nbsp;符号，上面显示的数字会递增；</li>
<li>但是我们第一次接触main.dart中的代码，可能会发现很多<code>不认识</code>的代码，不知道这个内容是如何编写出来的；</li>
</ul>
<p><strong>下面从零去创建里面的代码，这样我们才能对Flutter应用程序的结构非常清晰；</strong></p>
<h2 id="二-开始flutter代码">二. 开始Flutter代码 </h2>
<h3 id="21-hello-world">2.1. Hello World </h3>
<h4 id="211-hello-world的需求">2.1.1. Hello World的需求 </h4>
<p>做任何的开发，我们都是从祖传的<code>Hello World</code>开始，那么现在我们的需求来了：</p>
<ul>
<li>在界面中心位置，显示一个Hello World；</li>
</ul>
<h4 id="212-hello-world的实现">2.1.2. Hello World的实现 </h4>
<p>下面，我们就动手开始编写Hello World：</p>
<pre data-role="codeBlock" data-info="dart" class="language-dart dart"><code><span class="token keyword keyword-import">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>
<span class="token keyword keyword-void">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">runApp</span><span class="token punctuation">(</span><span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'Hello World!'</span></span><span class="token punctuation">,</span> textDirection<span class="token punctuation">:</span> <span class="token class-name">TextDirection</span><span class="token punctuation">.</span>ltr<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre><p><img src="image-1.png" alt="alt text"></p>
<p>当然，上面的代码我们已经实现了在界面上显示Hello World：</p>
<ul>
<li>但是<code>没有居中</code>，<code>字体也有点小</code>；</li>
<li>这些问题，我们放到后面再来解决，先搞懂目前的几行代码；</li>
</ul>
<p>上面的代码我们有一些比较熟悉，有一些并不清楚是什么：</p>
<ul>
<li>比如我们知道Dart程序的<code>入口都是main函数</code>，而Flutter是Dart编写的，所以入口也是main函数；</li>
<li>但是我们导入的<code>Material是什么呢</code>？</li>
<li>另外，我们在main函数中调用了一个<code>runApp()函数</code>又是什么呢？</li>
</ul>
<p>下面，我们对不认识的代码进行一些分析。</p>
<h3 id="22-代码分析">2.2. 代码分析 </h3>
<h4 id="221-runapp和widget">2.2.1. runApp和Widget </h4>
<p><strong>runApp</strong>是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的</p>
<ul>
<li>我们可以点到runApp的源码，查看到该函数</li>
<li>我们暂时不分析具体的源码</li>
</ul>
<pre data-role="codeBlock" data-info="" class="language-text"><code>void runApp(Widget app) {  ...省略代码}
</code></pre><p>该函数让我们传入一个东西：<strong>Widget</strong>？</p>
<p>我们先说<strong>Widget的翻译</strong>：</p>
<ul>
<li>Widget在国内有很多的翻译；</li>
<li>做过Android、iOS等开发的人群，喜欢将它翻译成<strong>控件</strong>；</li>
<li>做过Vue、React等开发的人群，喜欢将它翻译成<strong>组件</strong>；</li>
<li>如果我们使用Google，Widget翻译过来应该是<strong>小部件</strong>；</li>
<li>没有说哪种翻译一定是对的，或者一定是错的，但是我个人更倾向于<strong>小部件或者组件</strong>；</li>
</ul>
<p><strong>Widget</strong>到底什么东西呢？</p>
<ul>
<li>我们学习Flutter，从一开始就可以有一个基本的认识：<strong>Flutter中万物皆Widget（万物皆可盘）</strong> ；</li>
<li>在我们iOS或者Android开发中，我们的界面有很多种类的划分：应用（Application）、视图控制器（View Controller）、活动（Activity）、View（视图）、Button（按钮）等等；</li>
<li>但是在Flutter中，<strong>这些东西都是不同的Widget而已</strong>；</li>
<li>也就是我们整个应用程序中<code>所看到的内容</code>几乎都是Widget，甚至是<code>内边距的设置</code>，我们也需要使用一个叫<code>Padding的Widget</code>来做；</li>
</ul>
<p>runApp函数让我们传入的就是一个Widget：</p>
<ul>
<li>但是我们现在没有Widget，怎么办呢？</li>
<li>我们可以导入Flutter默认已经给我们提供的Material库，来使用其中的很多内置Widget；</li>
</ul>
<h4 id="222-material设计风格">2.2.2. Material设计风格 </h4>
<p><strong>material是什么呢？</strong></p>
<ul>
<li>material是Google公司推行的一套<code>设计风格</code>，或者叫<code>设计语言</code>、<code>设计规范</code>等；</li>
<li>里面有非常多的设计规范，比如<code>颜色</code>、<code>文字的排版</code>、<code>响应动画与过度</code>、<code>填充</code>等等；</li>
<li>在Flutter中高度集成了<code>Material风格的Widget</code>；</li>
<li>在我们的应用中，我们可以直接使用这些Widget来创建我们的应用（后面会用到很多）；</li>
</ul>
<p><strong>Text小部件分析</strong>：</p>
<ul>
<li>我们可以使用Text小部件来完成文字的显示；</li>
<li>我们发现Text小部件继承自StatelessWidget，StatelessWidget继承自Widget；</li>
<li>所以我们可以将Text小部件传入到runApp函数中</li>
<li>属性非常多，但是我们已经学习了Dart语法，所以你会发现只有this.data属性是必须传入的。</li>
</ul>
<pre data-role="codeBlock" data-info="dart" class="language-dart dart"><code><span class="token keyword keyword-class">class</span> <span class="token class-name">Text</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword keyword-const">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
    <span class="token class-name">String</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>data<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-super">super</span><span class="token punctuation">.</span>key<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>style<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>strutStyle<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>textAlign<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>textDirection<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>locale<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>softWrap<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>overflow<span class="token punctuation">,</span>
    <span class="token metadata function">@Deprecated</span><span class="token punctuation">(</span>
      <span class="token string-literal"><span class="token string">'Use textScaler instead. '</span></span>
      <span class="token string-literal"><span class="token string">'Use of textScaleFactor was deprecated in preparation for the upcoming nonlinear text scaling support. '</span></span>
      <span class="token string-literal"><span class="token string">'This feature was deprecated after v3.12.0-2.0.pre.'</span></span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>textScaleFactor<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>textScaler<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>maxLines<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>semanticsLabel<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>textWidthBasis<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>textHeightBehavior<span class="token punctuation">,</span>
    <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>selectionColor<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><p><strong>StatelessWidget简单介绍：</strong></p>
<ul>
<li>StatelessWidget继承自Widget；</li>
</ul>
<pre data-role="codeBlock" data-info="" class="language-text"><code>abstract class StatelessWidget extends Widget {	// ...省略代码}
</code></pre><h3 id="23-代码改进">2.3. 代码改进 </h3>
<h4 id="231-改进界面样式">2.3.1. 改进界面样式 </h4>
<p>我们发现现在的代码并不是我们想要的最终结果：</p>
<ul>
<li>我们可能希望文字居中显示，并且可以大一些；</li>
<li><strong>居中显示：</strong> &nbsp;需要使用另外一个Widget，<code>Center</code>；</li>
<li><strong>文字大一些：</strong> &nbsp;需要给Text文本设置一些样式；</li>
</ul>
<p>我们修改代码如下：</p>
<ul>
<li>我们在Text小部件外层包装了一个Center部件，让Text作为其child；</li>
<li>并且，我们给Text组件设置了一个属性：style，对应的值是TextStyle类型；</li>
</ul>
<pre data-role="codeBlock" data-info="dart" class="language-dart dart"><code><span class="token keyword keyword-import">import</span> <span class="token string-literal"><span class="token string">'package:flutter/material.dart'</span></span><span class="token punctuation">;</span>
<span class="token function">main</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">&gt;</span></span> args<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">runApp</span><span class="token punctuation">(</span>
    <span class="token class-name">Center</span><span class="token punctuation">(</span>
      child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
        <span class="token string-literal"><span class="token string">"Hello World"</span></span><span class="token punctuation">,</span>
        textDirection<span class="token punctuation">:</span> <span class="token class-name">TextDirection</span><span class="token punctuation">.</span>ltr<span class="token punctuation">,</span>
        style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">40</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><h4 id="232-改进界面结构">2.3.2. 改进界面结构 </h4>
<p>目前我们虽然可以显示Hello World，但是我们发现最底部的背景是黑色，并且我们的页面并不够结构化。</p>
<ul>
<li>正常的App页面应该有一定的结构，比如通常都会有<code>导航栏</code>，会有一些<code>背景颜色</code>等</li>
</ul>
<p>在开发当中，我们并不需要从零去搭建这种结构化的界面，我们可以使用Material库，直接使用其中的一些封装好的组件来完成一些结构的搭建。</p>
<p>我们通过下面的代码来实现：</p>
<pre data-role="codeBlock" data-info="dart" class="language-dart dart"><code><span class="token function">main</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">&gt;</span></span> args<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">runApp</span><span class="token punctuation">(</span>
    <span class="token class-name">MaterialApp</span><span class="token punctuation">(</span>
      home<span class="token punctuation">:</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
        appBar<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"首页"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        body<span class="token punctuation">:</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>
          child<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span>
            <span class="token string-literal"><span class="token string">"Hello World"</span></span><span class="token punctuation">,</span>
            textDirection<span class="token punctuation">:</span> <span class="token class-name">TextDirection</span><span class="token punctuation">.</span>ltr<span class="token punctuation">,</span>
            style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">36</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><p>在最外层包裹一个<strong>MaterialApp</strong></p>
<ul>
<li>这意味着整个应用我们都会采用MaterialApp风格的一些东西，方便我们对应用的设计，并且目前我们使用了其中两个属性；</li>
<li>title：这个是定义在Android系统中打开多任务切换窗口时显示的标题；（暂时可以不写）</li>
<li>home：是该应用启动时显示的页面，我们传入了一个Scaffold；</li>
</ul>
<p><strong>Scaffold</strong>是什么呢？</p>
<ul>
<li>翻译过来是<code>脚手架</code>，脚手架的作用就是搭建页面的基本结构；</li>
<li>所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；</li>
<li>Scaffold也有一些属性，比如<code>appBar</code>和<code>body</code>；</li>
<li>appBar是用于设计导航栏的，我们传入了一个<code>title属性</code>；</li>
<li>body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；</li>
</ul>
<h4 id="233-进阶案例实现">2.3.3. 进阶案例实现 </h4>
<p>我们可以让界面中存在更多的元素：</p>
<ul>
<li>写到这里的时候，你可能已经发现<code>嵌套太多</code>了，接下来对代码重构的</li>
</ul>
<pre data-role="codeBlock" data-info="dart" class="language-dart dart"><code><span class="token function">main</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">&gt;</span></span> args<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">runApp</span><span class="token punctuation">(</span>
    <span class="token class-name">MaterialApp</span><span class="token punctuation">(</span>
      home<span class="token punctuation">:</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
        appBar<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"首页"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        body<span class="token punctuation">:</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>
          child<span class="token punctuation">:</span> <span class="token class-name">Row</span><span class="token punctuation">(</span>
            mainAxisAlignment<span class="token punctuation">:</span> <span class="token class-name">MainAxisAlignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
            children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
              <span class="token class-name">Checkbox</span><span class="token punctuation">(</span>value<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> onChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">{</span>
          
              <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"同意协议"</span></span><span class="token punctuation">,</span>style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">)</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><h3 id="24-代码重构">2.4. 代码重构 </h3>
<h4 id="241-创建自己的widget">2.4.1. 创建自己的Widget </h4>
<p>很多学习Flutter的人，都会被Flutter的<code>嵌套</code>劝退，当代码嵌套过多时，结构很容易看不清晰。</p>
<ul>
<li>1、Flutter整个开发过程中就是形成一个Widget树，所以形成嵌套是很正常的。</li>
</ul>
<p>但是，我们开发一个这么简单的程序就出现如此多的嵌套，如果应用程序更复杂呢？</p>
<ul>
<li>我们可以对我们的代码进行封装，将它们封装到自己的Widget中，创建自己的Widget；</li>
</ul>
<p>如何创建自己的Widget呢？</p>
<ul>
<li>在Flutter开发中，我们可以继承自StatelessWidget或者StatefulWidget来创建自己的Widget类；</li>
<li><strong>StatelessWidget：</strong> &nbsp;没有状态改变的Widget，通常这种Widget仅仅是做一些展示工作而已；</li>
<li><strong>StatefulWidget：</strong> &nbsp;需要保存状态，并且可能出现状态改变的Widget；</li>
</ul>
<p>在上面的案例中对代码的重构，我们使用StatelessWidget即可，所以我们接下来学习一下如果利用StatelessWidget来对我们的代码进行重构；</p>
<h4 id="242-statelesswidget">2.4.2. StatelessWidget </h4>
<p>StatelessWidget通常是一些没有状态（State，也可以理解成data）需要维护的Widget：</p>
<ul>
<li>它们的数据通常是直接写死；</li>
<li>从parent widget中传入的而且一旦传入就不可以修改；</li>
</ul>
<p>我们来看一下创建一个StatelessWidget的格式：</p>
<ul>
<li>1、让自己创建的Widget继承自StatelessWidget；</li>
<li>2、StatelessWidget包含一个必须重写的方法：build方法；</li>
</ul>
<pre data-role="codeBlock" data-info="dart" class="language-dart dart"><code><span class="token keyword keyword-class">class</span> <span class="token class-name">MyStatelessWidget</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>  
    <span class="token metadata function">@override</span>  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>   
         <span class="token keyword keyword-return">return</span> <span class="token operator">&lt;</span>返回我们的<span class="token class-name">Widget</span>要渲染的<span class="token class-name">Widget</span>，比如一个<span class="token class-name">Text</span> <span class="token class-name">Widget</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>  
   <span class="token punctuation">}</span><span class="token punctuation">}</span>
</code></pre><p><strong>build方法的解析：</strong></p>
<ul>
<li>Flutter在拿到我们自己创建的StatelessWidget时，就会执行它的build方法；</li>
<li>我们需要在build方法中告诉Flutter，我们的Widget希望渲染什么元素，比如一个Text Widget；</li>
<li>StatelessWidget没办法主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；</li>
</ul>
<p><strong>build方法什么情况下被执行呢？：</strong></p>
<ul>
<li>1、当我们的StatelessWidget第一次被插入到Widget树中时（也就是第一次被创建时）；</li>
<li>2、当我们的父Widget（parent widget）发生改变时，子Widget会被重新构建；</li>
</ul>
<h4 id="243-重构案例代码">2.4.3. 重构案例代码 </h4>
<p>现在我们就可以通过StatelessWidget来对我们的代码进行重构了</p>
<ul>
<li>因为我们的整个代码都是一些数据展示，没有数据的改变，使用StatelessWidget即可；</li>
<li>另外，为了体现更好的封装性，我对代码进行了两层的拆分，让代码结构看起来更加清晰；</li>
</ul>
<p>重构后的代码如下：</p>
<pre data-role="codeBlock" data-info="dart" class="language-dart dart"><code><span class="token function">main</span><span class="token punctuation">(</span><span class="token class-name">List</span><span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">String</span><span class="token punctuation">&gt;</span></span> args<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">runApp</span><span class="token punctuation">(</span>
    <span class="token class-name">MaterialApp</span><span class="token punctuation">(</span>
      home<span class="token punctuation">:</span> <span class="token class-name">HomeWigegt</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword keyword-class">class</span> <span class="token class-name">HomeWigegt</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword keyword-const">const</span> <span class="token class-name">HomeWigegt</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token keyword keyword-super">super</span><span class="token punctuation">.</span>key<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
        appBar<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"首页"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        body<span class="token punctuation">:</span> <span class="token class-name">Center</span><span class="token punctuation">(</span>
          child<span class="token punctuation">:</span> <span class="token class-name">Row</span><span class="token punctuation">(</span>
            mainAxisAlignment<span class="token punctuation">:</span> <span class="token class-name">MainAxisAlignment</span><span class="token punctuation">.</span>center<span class="token punctuation">,</span>
            children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
              <span class="token class-name">Checkbox</span><span class="token punctuation">(</span>value<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> onChanged<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">{</span>
          
              <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
              <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"同意协议"</span></span><span class="token punctuation">,</span>style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token punctuation">)</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><h2 id="三-案例练习">三. 案例练习 </h2>
<h3 id="31-案例最终效果">3.1. 案例最终效果 </h3>
<p>我们先来看一下案例的最终展示效果：</p>
<p><img src="image-2.png" alt="alt text"></p>
<ul>
<li>这个效果中我们会使用很多没有接触的Widget；</li>
<li>没有关系，后面这些常用的Widget我会一个个讲解；</li>
<li>这个案例最主要的目的还是让大家更加熟悉Flutter的开发模式以及自定义Widget的封装过程；</li>
</ul>
<h3 id="32-自定义widget">3.2. 自定义Widget </h3>
<p>在我们的案例中，很明显一个产品的展示就是一个大的Widget，这个Widget包含如下Widget：</p>
<ul>
<li>标题的Widget：使用一个Text Widget完成；</li>
<li>描述的Widget：使用一个Text Widget完成；</li>
<li>图片的Widget：使用一个Image Widget完成；</li>
<li>上面三个Widget要垂直排列，我们可以使用一个Column的Widget（之前使用了一次Row是水平排列的）</li>
</ul>
<p>另外，三个展示的标题、描述、图片都是不一样的，所以我们可以让Parent Widget来决定内容：</p>
<ul>
<li>创建三个成员变量保存父Widget传入的数据</li>
</ul>
<pre data-role="codeBlock" data-info="dart" class="language-dart dart"><code><span class="token keyword keyword-class">class</span> <span class="token class-name">ProductWidget</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword keyword-final">final</span> <span class="token class-name">String</span> title<span class="token punctuation">;</span>
  <span class="token keyword keyword-final">final</span> <span class="token class-name">String</span> desc<span class="token punctuation">;</span>
  <span class="token keyword keyword-final">final</span> <span class="token class-name">String</span> imageURL<span class="token punctuation">;</span>
  <span class="token class-name">ProductWidget</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>desc<span class="token punctuation">,</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>imageURL<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>
      children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">[</span>
        <span class="token class-name">Text</span><span class="token punctuation">(</span>title<span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">Text</span><span class="token punctuation">(</span>desc<span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span>imageURL<span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><h3 id="33-列表数据展示">3.3. 列表数据展示 </h3>
<p>现在我们就可以创建三个ProductItem来让他们展示了：</p>
<ul>
<li>MyApp和之前是一致的，没有任何改变；</li>
<li>HomeContent中，我们使用了一个Column，因为我们创建的三个ProductWidget是垂直排列的</li>
</ul>
<pre data-role="codeBlock" data-info="" class="language-text"><code>class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.blueAccent),
      home: Scaffold(
        appBar: AppBar(title: Text("首页"),backgroundColor: Colors.green,),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  const HomeContent({super.key});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: ListView(
        children: &lt;Widget&gt;[
          ProductWidget(
            "MacBook",
            "MacBook详细描述",
            "https://img0.baidu.com/it/u=4146151895,3161377460&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=800&amp;h=830",
          ),
          ProductWidget(
            "IMac",
            "IMac详细描述",
            "https://img0.baidu.com/it/u=2077678719,3178805004&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=1007&amp;h=800",
          ),
          ProductWidget(
            "macMini4",
            "macMini4详细描述",
            "https://q4.itc.cn/q_70/images03/20241030/8909a9798b5d47b5bb7c84bf34a26afd.jpeg",
          ),
        ],
      ),
    );
  }
}
</code></pre><p>运行效果如下：</p>
<ul>
<li>错误信息：下面出现了黄色的斑马线；</li>
<li>这是因为在Flutter的布局中，内容是不能超出屏幕范围的，当超出时不会自动变成滚动效果，而是会报下面的错误；</li>
</ul>
<p>如何可以解决这个问题呢？</p>
<ul>
<li>我们将Column换成ListView即可；</li>
<li>ListView可以让自己的子Widget变成滚动的效果；</li>
</ul>
<h3 id="34-案例细节调整">3.4. 案例细节调整 </h3>
<h4 id="341-界面整体边距">3.4.1. 界面整体边距 </h4>
<p>如果我们希望整个内容距离屏幕的边缘有一定的间距，怎么做呢？</p>
<ul>
<li>我们需要使用另外一个Widget：Padding，它有一个padding属性用于设置边距大小；</li>
<li>没错，设置内边距也是使用Widget，这个Widget就是Padding；</li>
</ul>
<h4 id="342-商品内边距和边框">3.4.2. 商品内边距和边框 </h4>
<p>我们现在希望给所有的商品也添加一个内边距，并且还有边框，怎么做呢？</p>
<ul>
<li>我们可以使用一个Container的Widget，它里面有padding属性，并且可以通过        decoration来设置边框；</li>
<li>Container我们先用起来；</li>
</ul>
<h4 id="343-文字图片的间距">3.4.3. 文字图片的间距 </h4>
<p>我们希望给图片和文字之间添加一些间距，怎么做呢？</p>
<ul>
<li>方式一：给图片或者文字添加一个向上的内边距或者向下的内边距；</li>
<li>方式二：使用SizedBox的Widget，设置一个height属性，可以增加一些距离；</li>
</ul>
<h3 id="35-最终实现代码">3.5. 最终实现代码 </h3>
<p>最后，我给出最终实现代码：</p>
<pre data-role="codeBlock" data-info="dart" class="language-dart dart"><code><span class="token keyword keyword-class">class</span> <span class="token class-name">MyApp</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token class-name">MaterialApp</span><span class="token punctuation">(</span>
      theme<span class="token punctuation">:</span> <span class="token class-name">ThemeData</span><span class="token punctuation">(</span>primaryColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>blueAccent<span class="token punctuation">)</span><span class="token punctuation">,</span>
      home<span class="token punctuation">:</span> <span class="token class-name">Scaffold</span><span class="token punctuation">(</span>
        appBar<span class="token punctuation">:</span> <span class="token class-name">AppBar</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">"首页"</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>backgroundColor<span class="token punctuation">:</span> <span class="token class-name">Colors</span><span class="token punctuation">.</span>green<span class="token punctuation">,</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        body<span class="token punctuation">:</span> <span class="token class-name">HomeContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword keyword-class">class</span> <span class="token class-name">HomeContent</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token class-name">Padding</span><span class="token punctuation">(</span>
      padding<span class="token punctuation">:</span> <span class="token keyword keyword-const">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">8.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      child<span class="token punctuation">:</span> <span class="token class-name">ListView</span><span class="token punctuation">(</span>
        children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">[</span>
           <span class="token class-name">ProductWidget</span><span class="token punctuation">(</span>
            <span class="token string-literal"><span class="token string">"MacBook"</span></span><span class="token punctuation">,</span>
            <span class="token string-literal"><span class="token string">"MacBook详细描述"</span></span><span class="token punctuation">,</span>
            <span class="token string-literal"><span class="token string">"https://img0.baidu.com/it/u=4146151895,3161377460&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=800&amp;h=830"</span></span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">ProductWidget</span><span class="token punctuation">(</span>
            <span class="token string-literal"><span class="token string">"IMac"</span></span><span class="token punctuation">,</span>
            <span class="token string-literal"><span class="token string">"IMac详细描述"</span></span><span class="token punctuation">,</span>
            <span class="token string-literal"><span class="token string">"https://img0.baidu.com/it/u=2077678719,3178805004&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=1007&amp;h=800"</span></span><span class="token punctuation">,</span>
          <span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">ProductWidget</span><span class="token punctuation">(</span>
            <span class="token string-literal"><span class="token string">"macMini4"</span></span><span class="token punctuation">,</span>
            <span class="token string-literal"><span class="token string">"macMini4详细描述"</span></span><span class="token punctuation">,</span>
            <span class="token string-literal"><span class="token string">"https://q4.itc.cn/q_70/images03/20241030/8909a9798b5d47b5bb7c84bf34a26afd.jpeg"</span></span><span class="token punctuation">,</span>
 <span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword keyword-class">class</span> <span class="token class-name">ProductWidget</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">StatelessWidget</span> <span class="token punctuation">{</span>
  <span class="token keyword keyword-final">final</span> <span class="token class-name">String</span> title<span class="token punctuation">;</span>
  <span class="token keyword keyword-final">final</span> <span class="token class-name">String</span> desc<span class="token punctuation">;</span>
  <span class="token keyword keyword-final">final</span> <span class="token class-name">String</span> imageURL<span class="token punctuation">;</span>
  <span class="token class-name">ProductWidget</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>desc<span class="token punctuation">,</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span>imageURL<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token metadata function">@override</span>
  <span class="token class-name">Widget</span> <span class="token function">build</span><span class="token punctuation">(</span><span class="token class-name">BuildContext</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword keyword-return">return</span> <span class="token class-name">Container</span><span class="token punctuation">(</span>
      padding<span class="token punctuation">:</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      decoration<span class="token punctuation">:</span> <span class="token class-name">BoxDecoration</span><span class="token punctuation">(</span>border<span class="token punctuation">:</span> <span class="token class-name">Border</span><span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      child<span class="token punctuation">:</span> <span class="token class-name">Column</span><span class="token punctuation">(</span>
        children<span class="token punctuation">:</span> <span class="token generics"><span class="token punctuation">&lt;</span><span class="token class-name">Widget</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">[</span>
          <span class="token class-name">Text</span><span class="token punctuation">(</span>title<span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">Text</span><span class="token punctuation">(</span>desc<span class="token punctuation">,</span> style<span class="token punctuation">:</span> <span class="token class-name">TextStyle</span><span class="token punctuation">(</span>fontSize<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">SizedBox</span><span class="token punctuation">(</span>height<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token class-name">Image</span><span class="token punctuation">.</span><span class="token function">network</span><span class="token punctuation">(</span>imageURL<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
      </div>
      
      
    
    
    
    
    
    
  
    </body></html>